import React from 'react';
import ReactDom from 'react-dom';
import {Layout, Menu, message} from 'antd';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import Reg from "./component/registor";
import Login from "./component/login";
import {service} from "./service/service";
import {Redirect} from "react-router";
import {inject} from "./utils/inject_service";
import Input_result from "./component/input_result";
import Query_result from "./component/query_result";
import Output_result from "./component/output_result";
import Use_datatable from "./component/use_datatable";


import "antd/lib/layout/style";
import "antd/lib/menu/style";
import "antd/lib/message/style";
import "./css/modify.css";


const {Header, Content, Footer} = Layout;
const { SubMenu } = Menu;

@inject({service})
class Root extends React.Component {
    index() {
        return (<div>
            <h1>this is index!</h1>
        </div>);
    }

    quit() {
        this.props.service.quit_login();
        this.props.service.login_status = false;
        message.info("用户已退出!");
        return <Redirect to="/"/>
    }

    render() {
        return (
            <Router>
                <Layout className="layout">
                    <Header>
                        <div className="logo"/>
                        <Menu
                            theme="dark"
                            mode="horizontal"
                        >
                            <Menu.Item key="1"><Link to="/">首 页</Link></Menu.Item>
                            <Menu.Item key="2"><Link to="login">登 录</Link></Menu.Item>
                            <Menu.Item key="3"><Link to="reg">注 册</Link></Menu.Item>

                            <SubMenu key="sub1" title={<span>成绩操作</span>}>
                                <Menu.Item key="7"><Link to="input_result">输入成绩</Link></Menu.Item>
                                <Menu.Item key="8"><Link to="query_result">查询成绩</Link></Menu.Item>
                                <Menu.Item key="9"><Link to="output_result">输出成绩</Link></Menu.Item>
                                <Menu.Item key="10"><Link to="/use_datatable">输出成绩2</Link></Menu.Item>
                            </SubMenu>

                            <Menu.Item key="5"><Link to="quit">退 出</Link></Menu.Item>
                        </Menu>
                    </Header>
                    <Content style={{padding: '0 50px'}}>
                        <div className="site-layout-content">
                            <Route path="/reg" component={Reg}/>
                            <Route path="/login" component={Login}/>
                            <Route path="/input_result" component={Input_result}/>
                            <Route path="/query_result" component={Query_result}/>
                            <Route path="/output_result" component={Output_result}/>
                            <Route path="/use_datatable" component={Use_datatable}/>
                            <Route path="/quit" component={this.quit.bind(this)}/>
                            <Route exact path="/" component={this.index}/>
                        </div>
                    </Content>
                    <Footer style={{textAlign: 'center'}}>Ant Design ©2018 Created by Ant UED</Footer>
                </Layout>
            </Router>
        );
    }
}


ReactDom.render(<Root/>, document.getElementById('root'));


